<template>
  <div>
    <div style="width: 100%;height: 100px;background-color: #999999">
      <span style="color: #2b333b;font-size: 22px;margin: 12px">试卷名称</span>
      <div style="width: 400px;display: inline-block;margin: 12px;font-size: 22px">
        <el-input  placeholder="请输入内容" v-model="testPaper.testName" style="display: flex"></el-input>
      </div>
      <span style="color: #2b333b;font-size: 22px;margin: 12px">课程名称</span>
      <div style="width: 200px;display: inline-block;margin: 12px;font-size: 22px">
        <el-select v-model="testPaper.classId" filterable placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.class_id"
              :label="item.class_name"
              :value="item.class_id">
          </el-option>
        </el-select>
      </div>
      <span style="color: #2b333b;font-size: 22px;margin: 12px">限时</span>
      <div style="width: 100px;display: inline-block;margin: 12px;font-size: 22px">
        <el-input  type="number" v-model="testPaper.time" style="display: flex"></el-input>
      </div>
      <div style="width: 100px;display: inline-block;margin: 12px;font-size: 22px;float: right">
        <el-button type="primary" @click="$router.push({name:'Test',query:{key:'考试管理'}})">返回页面</el-button>
      </div>
    </div>
  <div  ref="tplist" >
  <el-card class="box-card " v-for="(item, index1) in questions" :key="index1" id="tp" >
    <div slot="header" class="clearfix">
      <el-input v-model="item.contents">
        <template slot="prepend"><p class="inptTem2"> 题目{{index1+1}} </p></template>
      </el-input>
      <el-button style="float: right; padding: 3px 0;margin: 5px" type="text" @click="addOptions(index1)">添加选项</el-button>
      <el-button style="float: right; padding: 3px 14px 3px 0;margin: 5px" type="text" @click="deleteData(index1)">删除题目</el-button>
    </div>
    <div v-for="(items, index2) in item.testOptions" :key="index2" >
      <div style="display: inline">
        <el-input  v-model="item.testOptions[index2]" style="margin-bottom: 5px;margin-left: 10px;
        margin-right: 10px;float:left;width:70%">
          <template slot="prepend" ><p class="inptTem2">选项 {{index2+1}}</p></template>
        </el-input >
        <el-button style="float: left; width:120px;margin-bottom: 5px;height: 100%"
                   icon="el-icon-delete" type="primary" @click="deleteOptions(index1,index2)">删除</el-button>
      </div>
    </div>
    <div style="margin-top: 15px;width:80%;margin-right: 15px ;">
    <p class="inptTem1" style="display: flex;float: left">参考答案</p>
      <div style="display: inline-block;width: 300px;margin-left: 20px">
        <el-select v-model="item.answer" filterable placeholder="请选择"  style="display: flex">
        <el-option
          v-for="(item2,index3) in item.testOptions"
          :key="index3+1"
          :label="item2"
          :value="index3+1+''">
        </el-option>
        </el-select>
      </div>
      <div style="display: inline-flex;margin-left: 20px;float: right">
        分值：<el-input-number v-model="item.value" style="width: 150px" :min=0 :max=100></el-input-number>
      </div>
    </div>
  </el-card>
    <div class="box-card" style="margin-top: 20px">
      <el-button type="primary" icon="el-icon-upload" style="float: right; margin:0 5px 0 5px" @click="uploadData">上传</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="getData()" style="float: right; margin: 0 5px 0 5px ">添加题目</el-button>
    </div>
  </div>
  </div>
</template>

<script>
import Problem from '../../util/Problem'
export default {
  name: "EditTestPaper",
  data(){
    return{
      questions:[],
      options: [],
      testPaper:{
        testId:'',
        classId:'',
        testName:'',
        testFile:'',
        time:0
      }
    }
  },

  methods:{
    getData(){
      var x= new Problem();
      this.questions.push(x);

    },
    addOptions(item){
     this.questions[item].testOptions.push('');

    },
    deleteOptions(index1,index2){
        this.questions[index1].testOptions.splice(index2,1);
    },
    deleteData(index1){
      this.$confirm('此操作将永久删除题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.questions.splice(index1,1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    uploadData(){
      if(this.testPaper.testName===''||this.testPaper.classId===''||this.testPaper.time===0){
        this.$message({
          type: 'error',
          message: '表单未完成'
        });
        return ;
      }
      this.$axios.post('/uploadTest',{data:this.questions}).then(res=>{
        this.testPaper.testFile=res.data
        this.$message({
          type: 'success',
          message: '上传成功!'
        });
        this.$axios.post('/uploadTestMessage',{
          testId:this.testPaper.testId,
          classId:this.testPaper.classId,
          testName:this.testPaper.testName,
          testFile:this.testPaper.testFile,
          time:this.testPaper.time
        })

      });
    }



  },
  mounted() {
    this.$axios.get('/getClassList').then(res=>this.options=res.data);
    if('testName' in this.$route.query && 'testId' in this.$route.query &&
        'classId' in this.$route.query && 'testFile' in this.$route.query && 'time' in this.$route.query
    ){
      this.testPaper.testName=this.$route.query.testName;
      this.testPaper.testId=this.$route.query.testId;
      this.testPaper.classId=this.$route.query.classId;
      this.testPaper.testFile=this.$route.query.testFile;
      this.testPaper.time=this.$route.query.time;
      this.$axios.post('/getTestPaper',{
        name:this.testPaper.testFile,
        type:1}).then(
          resp=>{
            this.questions=resp.data;
          }
      )
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.inptTem1 {
  color: red;
  font-size: 20px;
  font-family: PingFang-RE;
}

.inptTem2{
  color: black;
  font-size: 14px;
  font-family: PingFang-RE;
  display: inline;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 80%;
  margin:5px auto 5px auto;

}
</style>
